<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能养殖建议</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .advice-card {
            transition: transform 0.2s;
        }
        .advice-card:hover {
            transform: translateY(-5px);
        }
        .priority-high {
            border-left: 4px solid #dc3545;
        }
        .priority-medium {
            border-left: 4px solid #ffc107;
        }
        .priority-low {
            border-left: 4px solid #28a745;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="text-center mb-5">
            <h1 class="text-primary">
                <i class="bi bi-lightbulb"></i> 智能养殖建议系统
            </h1>
            <p class="lead">基于实时数据为您提供专业的养殖建议</p>
        </div>

        <!-- 数据概览 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-body text-center">
                        <i class="bi bi-thermometer-half text-primary" style="font-size: 2rem;"></i>
                        <h5>水质状况</h5>
                        <p class="mb-0">水温: {{ water_quality.temperature }}℃</p>
                        <p class="mb-0">pH: {{ water_quality.ph }}</p>
                        <p class="mb-0">溶解氧: {{ water_quality.dissolved_oxygen }}mg/L</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-body text-center">
                        <i class="bi bi-fish text-success" style="font-size: 2rem;"></i>
                        <h5>鱼类状态</h5>
                        <p class="mb-0">数量: {{ fish_data.count }}条</p>
                        <p class="mb-0">平均体重: {{ "%.1f"|format(fish_data.avg_weight) }}g</p>
                        <p class="mb-0">平均体长: {{ "%.1f"|format(fish_data.avg_length) }}cm</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-body text-center">
                        <i class="bi bi-cloud-sun text-warning" style="font-size: 2rem;"></i>
                        <h5>天气状况</h5>
                        <p class="mb-0">气温: {{ weather_data.temperature }}℃</p>
                        <p class="mb-0">风速: {{ weather_data.wind_speed }}m/s</p>
                        <p class="mb-0">湿度: {{ weather_data.humidity }}%</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-body text-center">
                        <i class="bi bi-gear text-info" style="font-size: 2rem;"></i>
                        <h5>系统状态</h5>
                        <p class="mb-0"><span class="badge bg-success">正常运行</span></p>
                        <p class="mb-0">建议数量: {{ advice_list|length }}条</p>
                        <p class="mb-0">更新时间: {{ current_time }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 建议生成按钮 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-magic"></i> 智能建议生成</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <button id="generateAdvice" class="btn btn-primary btn-lg w-100">
                                    <i class="bi bi-lightning"></i> 生成新建议
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button id="refreshData" class="btn btn-outline-secondary btn-lg w-100">
                                    <i class="bi bi-arrow-clockwise"></i> 刷新数据
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 建议列表 -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="bi bi-list-check"></i> 养殖建议 ({{ advice_list|length }}条)</h5>
                    </div>
                    <div class="card-body">
                        {% if advice_list %}
                            <div class="row">
                                {% for advice in advice_list %}
                                <div class="col-md-6 mb-3">
                                    <div class="card advice-card h-100 priority-{{ advice.priority }}">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0">
                                                <i class="bi bi-{{ 'exclamation-triangle' if advice.priority == 'high' else 'info-circle' if advice.priority == 'medium' else 'check-circle' }}"></i>
                                                {{ advice.title }}
                                            </h6>
                                            <span class="badge bg-{{ 'danger' if advice.priority == 'high' else 'warning' if advice.priority == 'medium' else 'success' }}">
                                                {{ '高优先级' if advice.priority == 'high' else '中优先级' if advice.priority == 'medium' else '低优先级' }}
                                            </span>
                                        </div>
                                        <div class="card-body">
                                            <p class="card-text">{{ advice.content }}</p>
                                            <div class="mt-2">
                                                <small class="text-muted">
                                                    <i class="bi bi-clock"></i> 建议时间: {{ advice.timestamp }}
                                                </small>
                                            </div>
                                            {% if advice.actions %}
                                            <div class="mt-3">
                                                <strong>建议操作:</strong>
                                                <ul class="list-unstyled mt-2">
                                                    {% for action in advice.actions %}
                                                    <li><i class="bi bi-arrow-right"></i> {{ action }}</li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-5">
                                <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                                <h5 class="text-muted mt-3">暂无建议</h5>
                                <p class="text-muted">点击上方按钮生成智能建议</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="text-center mt-4">
            <a href="{{ url_for('user_home') }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 生成建议按钮
        document.getElementById('generateAdvice').addEventListener('click', function() {
            this.disabled = true;
            this.innerHTML = '<i class="bi bi-hourglass-split"></i> 生成中...';
            
            fetch('/api/generate_advice', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('生成建议失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('生成建议时发生错误');
            })
            .finally(() => {
                this.disabled = false;
                this.innerHTML = '<i class="bi bi-lightning"></i> 生成新建议';
            });
        });

        // 刷新数据按钮
        document.getElementById('refreshData').addEventListener('click', function() {
            this.disabled = true;
            this.innerHTML = '<i class="bi bi-hourglass-split"></i> 刷新中...';
            
            setTimeout(() => {
                location.reload();
            }, 1000);
        });
    </script>
</body>
</html> 